<script setup lang="ts">
import { getAllDep } from '@/services/consult'
import { useConsultStore } from '@/stores'
import type { TopDep } from '@/types/consult'
import { onMounted } from 'vue'
import { ref, computed } from 'vue'

// 当前选中的sidebar-item的索引
const active = ref(0)

// 1. 一级科室
// 接收后台返回的科室数据数组
const allDep = ref<TopDep[]>([])
// 什么时候发请求呢
onMounted(async () => {
  const res = await getAllDep()
  allDep.value = res.data
})

//2. 二级科室  需要依赖 一级科室和当前激活的一级科室索引得到
// 注意： 组件初始化没有数据 child 可能拿不到    active => 当前激活的 sideBar-item的索引一级科室的索引
const subDep = computed(() => allDep.value[active.value]?.child)

//3. 记录科室的id
const store = useConsultStore()
</script>

<template>
  <div class="consult-dep-page">
    <!-- 导航栏 -->
    <cp-nav-bar title="选择科室" />

    <div class="wrapper">
      <!-- 侧边栏组件 -->
      <van-sidebar v-model="active">
        <van-sidebar-item :title="top.name" v-for="top in allDep" :key="top.id" />
      </van-sidebar>

      <!-- 二级科室 -->
      <div class="sub-dep">
        <!-- 点击二级科室的时候跳转到下一个页面，要记录科室的id到问诊记录 -->
        <router-link
          to="/consult/illness"
          v-for="sub in subDep"
          :key="sub.id"
          @click="store.setDep(sub.id)"
        >
          <!-- 二级科室的名称 -->
          {{ sub.name }}
        </router-link>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.van-sidebar {
  width: 114px;
  &-item {
    padding: 14px;
    color: var(--cp-tag);
    &--select {
      color: var(--cp-main);
      font-weight: normal;
      &::before {
        display: none;
      }
    }
  }
}
/* 二级科室样式 */
.wrapper {
  height: calc(100vh - 46px);
  overflow: hidden;
  display: flex;
  .sub-dep {
    flex: 1;
    height: 100%;
    overflow-y: auto;
    > a {
      display: block;
      padding: 14px 30px;
      color: var(--cp-dark);
    }
  }
}
.consult-dep-page {
  padding-top: 46px;
}
</style>
